<template>
  <div class="anesthesiaSheet">
      <div>
          <svg id="wrapper"></svg>
      </div>
  </div>
</template>
<script>
import * as d3 from "d3"
export default {
  data() {
      return {

      }
  },
  created() {

  },
  mounted() {
      class D3Drawer {
          constructor(svgSelector) {
              this.svg = d3.select(svgSelector);
          }

          drawPoint(coordinates, radius = 5, color = "black") {
              this.svg.append("circle")
                  .attr("cx", coordinates[0])
                  .attr("cy", coordinates[1])
                  .attr("r", radius)
                  .attr("fill", color);
          }

          drawLine(startCoordinates, endCoordinates, color = "black", strokeWidth = 2) {
              this.svg.append("line")
                  .attr("x1", startCoordinates[0])
                  .attr("y1", startCoordinates[1])
                  .attr("x2", endCoordinates[0])
                  .attr("y2", endCoordinates[1])
                  .style("stroke", color)
                  .style("stroke-width", strokeWidth);
          }

          drawIcon(coordinates, icon, fontSize = "12px", color = "black") {
              this.svg.append("text")
                  .attr("x", coordinates[0])
                  .attr("y", coordinates[1])
                  .text(icon)
                  .attr("font-family", "FontAwesome") // 修改为你的图标字体
                  .attr("font-size", fontSize)
                  .attr("fill", color);
          }

          drawText(coordinates, text, fontSize = "12px", color = "black") {
              this.svg.append("text")
                  .attr("x", coordinates[0])
                  .attr("y", coordinates[1])
                  .text(text)
                  .attr("font-size", fontSize)
                  .attr("fill", color);
          }
      }

      // 创建 D3Drawer 实例
      const drawer = new D3Drawer(document.querySelector("#wrapper"));

      // 使用实例方法绘制图形
      drawer.drawPoint([50, 50], 8, "red");
      drawer.drawLine([100, 100], [200, 200], "blue", 2);
      // drawer.drawIcon([150, 150], "\uf06e"); // Font Awesome 的一个图标
      drawer.drawText([250, 250], "Hello, D3!", "14px", "green");
  },
  methods: {
      handleClick() {

      }
  }
}
</script>
<style scoped>
#wrapper {
  width: 800px;
  height: 1000px;
  border: 1px solid red;
}
</style>